<template>
	<view class="all-main">
		<view class="main">
			<view class="address-con">
				<view class="con-item">
					<view class="item-lable">
						收货人
					</view>
					<view class="item-input">
						<input type="text" v-model="data.name" placeholder="请填写收货人姓名">
					</view>
				</view>
				<view class="con-item">
					<view class="item-lable">
						手机号码
					</view>
					<view class="item-input">
						<input type="number" maxlength="11" v-model="data.mobile" placeholder="请填写收货人手机号">
					</view>
				</view>
				<view class="con-item">
					<view class="item-lable">
						所在地区
					</view>
					<view class="item-input">
						<!-- <input type="text" v-model="districts" disabled="" @click="district" placeholder="省市区县、乡镇等"> -->
						<view class="input_tag" :class="districts != '' ? 'blacks' : ''" @click="district">
							<text>{{districts != '' ? districts : '省市区县、乡镇等'}}</text>
						</view>
						<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm"
							@change="changeHandler" @cancel="show = false"></u-picker>
					</view>
				</view>
				<view class="con-item">
					<view class="item-lable">
						详情地址
					</view>
					<view class="item-input">
						<input type="text" v-model="data.address" placeholder="街道、楼牌号等">
					</view>
				</view>
				<view class="con-item">
					<view class="item-lables">
						设置默认地址
					</view>
					<view class="item-inputs">
						<u-switch v-model="defaults"></u-switch>
					</view>
				</view>
			</view>
			<view class="bottom-btn">
				<text @click="saveData">保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	import cityData from '@/static/js/city.js'
	export default {
		data() {
			return {
				userinfo: {},
				data: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					address: '',
					default: 0,
					type: 1
				},
				districts: '',
				defaults: false,
				show: false,
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
			}
		},
		onLoad(e) {
			if (e.type != undefined) {
				this.data.type = e.type
			}
			if (e.order_id != undefined) {
				this.data.order_id = e.order_id
			}
			this.userinfo = uni.getStorageSync('userinfo');
			this.initCityData()
		},
		methods: {
			// 添加收货地址
			async saveData() {
				var that = this
				if (this.defaults) {
					this.data.default = 1
				}
				if (this.data.name == '') {
					uni.showToast({
						title: '请填写收货人姓名',
						icon: "none"
					});
					return false
				}
				if (this.data.mobile == '') {
					uni.showToast({
						title: '请填写收货人手机号',
						icon: "none"
					});
					return false
				} else {
					var phoneReg = /^1[3456789]\d{9}$/;
					if (!phoneReg.test(this.data.mobile)) {
						uni.showToast({
							title: '收货人手机号格式错误',
							icon: "none"
						});
						return false
					}
				}
				if (this.data.province == '') {
					uni.showToast({
						title: '请选择省市区',
						icon: "none"
					});
					return false
				}
				if (this.data.address == '') {
					uni.showToast({
						title: '请填写详细地址',
						icon: "none"
					});
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Order/addAddress',
					data: this.data,
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 1) {
					setTimeout(function() {
						uni.navigateBack({
							delta: 1, // 返回的页面数，如果为1表示返回上一页
						});
					}, 1000)
				}
			},
			district() {
				this.show = true
			},
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				this.districts = e.value.join("/")
				this.data.province = e.value[0]
				this.data.city = e.value[1]
				this.data.district = e.value[2]
				// 隐藏城市选择器
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	.all-main {

		.main {
			padding: 20rpx;

			.address-con {
				background-color: #ffffff;
				padding: 0 20rpx;
				border-radius: 10rpx;

				.con-item {
					padding: 20rpx 0;
					border-bottom: 1px solid #f4f4f5;
					font-size: 30rpx;
					line-height: 60rpx;
					height: 60rpx;

					.item-lable {
						float: left;
						font-weight: bold;
						width: 25%;
					}

					.item-input {
						display: flex;
						align-items: center;
						width: 73%;
						float: right;
						
						input {
							margin-top: 8rpx;
						}
						
						.input_tag {
							width: 100%;
							display: flex;
							justify-content: flex-start;
							text-align: left;
							color: #909399;
						}
						
						.blacks {
							color: #303133;
						}
					}

					.item-lables {
						float: left;
						font-weight: bold;
						width: 35%;
					}

					.item-inputs {
						margin-top: 8rpx;
						float: right;
					}
				}
			}

			.bottom-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				height: 100rpx;
				background-color: #ffffff;
				text-align: center;

				text {
					margin: 0 auto;
					margin-top: 10rpx;
					display: block;
					width: 80%;
					padding: 20rpx;
					background-color: #fa3534;
					color: #ffffff;
					font-size: 30rpx;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>